<template>
    <template v-for="item in menu">
        <el-menu-item v-if="validatenull(item[childrenKey]) && validRoles(item)"
                      :index="getPath(item)"
                      @click="open(item)"
                      :key="item[labelKey]">
            <el-icon :size="18">
                <component :is="item[iconKey]"/>
            </el-icon>
            <template #title>
                <span :alt="item[pathKey]">{{ getTitle(item) }}</span>
            </template>
        </el-menu-item>
        <el-sub-menu v-else-if="!validatenull(item[childrenKey])&&validRoles(item)"
                     :index="getPath(item)"
                     :key="item[labelKey]">
            <template #title>
                <el-icon :size="18">
                    <component :is="item[iconKey]"/>
                </el-icon>
                <span>{{ getTitle(item) }}</span>
            </template>
            <template v-for="(child,cindex) in item[childrenKey]"
                      :key="child[labelKey]">
                <el-menu-item :index="getPath(child)"
                              @click="open(child)"
                              v-if="validatenull(child[childrenKey])">
                    <el-icon :size="18">
                        <component :is="child[iconKey]"/>
                    </el-icon>
                    <template #title>
                        <span>{{ getTitle(child) }}</span>
                    </template>
                </el-menu-item>
                <sidebar-item v-else
                              :menu="[child]"
                              :key="cindex"></sidebar-item>
            </template>
        </el-sub-menu>
    </template>
</template>
<script>
import {mapGetters} from "vuex";
import {validatenull} from 'utils/validate'

import website from '@/config/website'

export default {
    name: "sidebarItem",
    data() {
        return {
            props: website.menu
        }
    },
    props: {
        menu: Array
    },
    computed: {
        ...mapGetters(["roles"]),
        id() {
            return "id"
        },
        labelKey() {
            return "name"
        },
        pathKey() {
            return "url"
        },
        queryKey() {
            return "query"
        },
        iconKey() {
            return "icon"
        },
        childrenKey() {
            return "menus"
        }
    },
    methods: {
        validatenull,
        getPath(item) {
            if (item[this.pathKey] == null || item[this.pathKey] === '') {
                return item[this.id]
            }
            return item[this.pathKey]
        },
        getTitle(item) {
            return item[this.labelKey]
            //return this.$router.$avueRouter.generateTitle(item, this.props);
        },
        validRoles(item) {
            // item.meta = item.meta || {};
            // return item.meta.roles ? item.meta.roles.includes(this.roles) : true;
            return true;
        },
        open(item) {
            // console.log("点击菜单跳转:" + item.url)
            // 判断是否是 / 开头 (https 和 http 开头使用iframe 打开)
            let isIframe = (item.url.indexOf("http://") !== -1 || item.url.indexOf("https://") !== -1);
            if (isIframe) {
                // 跳iframe
                this.$router.push({
                    path: "/iframe",
                    query: {url: item[this.pathKey]}
                });
            } else {
                // 路由跳转
                this.$router.push({
                    path: item[this.pathKey],
                    query: item[this.queryKey]
                });
            }
        }
    }
};
</script>

